<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">


    <title>智慧教育平台-系统配置</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="shortcut icon" href="../../static/favicon.ico"
          th:href="@{/static/favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6"
          th:href="@{/static/css/bootstrap.min.css(v='3.3.6')}" rel="stylesheet">
    <link href="../../static/css/font-awesome.min.css?v=4.4.0"
          th:href="@{/static/css/font-awesome.min.css(v='4.4.0')}" rel="stylesheet">
    <link href="../../static/css/animate.css"
          th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0"
          th:href="@{/static/css/style.css(v='4.1.0')}" rel="stylesheet">

    <!-- 弹出框插件 -->
    <link href="../../static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"
          th:href="@{/static/css/plugins/sweetalert/sweetalert.css }">

    <!--时间控件-->
    <link href="../../static/css/plugins/datapicker/datepicker3.css"
          th:href="@{../../static/css/plugins/datapicker/datepicker3.css}" rel="stylesheet">

    <style type="text/css">
        .table > thead > tr > th    {
            color: #2a62bc;
        }
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="white-bg ">
        <!--主体开始-->
        <div class="row ">
            <div class="wrapper-content">
            <div class="col-md-10 " >
                <form class="form-inline">
                    <div class="form-group" >
                        <label >开始时间:</label>
                            <div class="input-group" >
                                <input type="text"  class="form-control" id="starttime">
                            </div>
                    </div>
                    <div class="form-group" style="margin-right: 20px">
                        <label >结束时间:</label>
                            <div class="input-group" >
                                    <input type="text" class=" form-control" id="endtime" />
                                </div>
                            <button type="submit" class="btn btn-success" id="query">查询</button>
                    </div>
                </form>
            </div>
            <div class="col-md-2">
                <!--弃用模态框-->
                <submit type="button" class="btn btn-danger"  id="delete">删除</submit>
                <submit type="button" class="btn btn-success" id="backup">备份</submit>
            </div>
            </div>
        </div>
        <!--表格开始-->

        <div class="col-md-12 white-bg">
            <table id="backTab" class="table table-striped  table-bordered " style="margin-top: 20px" >
            </table>
        </div>

    </div>

    <!--模态框-->
    <!-- Modal -->
    <!--删除-->
    <div class="modal fade" id="deleteMod" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="deletetip">提示</h4>
                </div>
                <div class="modal-body">
                    确定删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--备份模态框-->
    <div class="modal fade" id="backMod" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >提示</h4>
                </div>
                <div class="modal-body">
                    确定备份吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="tabdelete" tabindex="-1" role="dialog" aria-labelledby="tabdele">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >提示</h4>
                </div>
                <div class="modal-body">
                    确定删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="tabdownload" tabindex="-1" role="dialog" aria-labelledby="tabdele">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >提示</h4>
                </div>
                <div class="modal-body">
                    确定下载吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- 全局js -->
    <script src="../../static/js/jquery.min.js?v=2.1.4"
            th:src="@{/static/js/jquery.min.js(v='2.1.4')}"></script>
    <script src="../../static/js/bootstrap.min.js?v=3.3.6"
            th:src="@{/static/js/bootstrap.min.js(v='3.3.6')}"></script>

    <!-- 自定义js -->
    <script src="../../static/js/content.js?v=1.0.0"
            th:src="@{/static/js/content.js(v='1.0.0')}"></script>
    <script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"
            th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
    <script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
            th:src="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>

    <!-- 弹出框插件 -->
    <script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
            th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js }"></script>
    <!--时间控件 -->
    <script src="../../static/js/plugins/datapicker/bootstrap-datepicker.js"
            th:src="@{../../static/js/plugins/datapicker/bootstrap-datepicker.js}"></script>
    <script src="../../static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js"
            th:src="@{../../static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js}"></script>

<script>
        /*时间控件配置*/
        $('input[id=starttime]').datepicker({
            language: "zh-CN",
            clearBtn: true,//清除
            autoclose: true,
            todayHighlight: true,
            orientation:'bottom' , //显示位置为下方
            pickerPosition:'bottom-left',//选择框位置
            format: 'yyyy-mm-dd',
            todayBtn: false,//今日按钮
            startDate: '1970-1-1', //与你自己设置的格式一致yyyy-mm-dd，未设置的话与默认格式一致mm/dd/yyyy
            endDate: '2070-1-1'
        });
        $('input[id=endtime]').datepicker({
            language: "zh-CN",
            clearBtn: true,//清除
            autoclose: true,
            todayHighlight: true,
            format: 'yyyy-mm-dd',
            todayBtn: false,//今日按钮
            startDate: '1970-1-1', //与你自己设置的格式一致yyyy-mm-dd，未设置的话与默认格式一致mm/dd/yyyy
            endDate: '2070-1-1'
        });
        $('#query').click(function () {
            var starttime=$('#starttime').val();
            var endtime=$('#endtime').val();
            console.log("starttime:"+starttime+"endtime"+endtime);
            alert("开始时间:"+starttime+"\n结束时间:"+endtime);
        });
        /*右上角备份和删除按钮*/
        $('#delete').click(function () {
            //alert("删除列表中的记录！");
            let rows = $('#backTab').bootstrapTable('getAllSelections');
            if (rows.length == 0){
                swal("至少选中一行！", "", "error");
                return false;
            }
            let delete_data = [];
            for (let i=0;i<rows.length;i++) {
                delete_data.push(rows[i].userName)
            }
            swal({
                title: "您确定要删除这"+delete_data.length+"条信息？",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                delete_data = JSON.stringify(rows);
                alert(delete_data);
                //获取对象
                var ids = $.map(rows, function (row) {
                    return row.id
                });
                //根据Id字段删除对应的数据
                $('#backTab').bootstrapTable('remove', {field: 'id',values: ids });
                swal("删除成功！", "您已经永久删除已选信息", "success");
            });
        });

        $('#backup').click(function () {
           /* alert("备份数据库成功！");*/
            swal({
                title: "您确定要备份信息吗？",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#1E90FF",
                confirmButtonText: "备份",
                closeOnConfirm: false
            }, function () {
                swal("备份成功！", "您的数据备份完成", "success");
            });
        });
        //表单部分


       $(function () {

           $("#backTab").bootstrapTable({
               pagination: true,
               pageNumber: 1,                       //初始化加载第一页，默认第一页
               pageSize: 5,                       //每页的记录行数（*）
               pageList: [10, 25, 50],        //可供选择的每页的行数（*）
               search: false,                  //是否显示搜索
               showColumns: false,                  //是否显示所有的列
               showRefresh: false,                  //是否显示刷新按钮
               showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
               uniqueId: "id",
               queryParams: function (params) {
                   var temp = {
                       "a": 1,
                       "b": 2,
                       "limits": params.limit,
                       "offset": params.offset
                   }
                   return temp;
               },
               url: "../../static/js/demo/system/file.json",
               columns: [{
                   checkbox: true  /* 是否添加复选框*/
               }, {
                   field: 'filename',
                   title: '文件名',
               }, {
                   field: 'backtime',
                   title: '备份时间',
               }, {
                   field: 'status',
                   title: '状态'
               }, {
                   align: "center",
                   title: "操作",


                   events: {

                       "click .downloadBtn": function (e, value, row, index) {
                           /*alert("确定要更新 id="+row.id+" 的记录吗？");
                           //todo*/
                           //采用 sweetalert 组件
                           swal({
                               title: "提示",
                               text: "确定要下载吗？",
                               type:"info",
                               showCancelButton: true,
                               confirmButtonColor: "#00ff00",
                               confirmButtonText: "下载",
                               cancelButtonText: "取消",
                               closeOnConfirm: false
                           }, function () {
                               // todo
                               console.log("要删除的记录是："+row.id);
                               swal("下载成功！", "请在下载中查看", "success");
                           });
                       },
                       "click .deleteBtn": function (e, value, row, index) {

                           //采用 sweetalert 组件
                           swal({
                               title: "您确定要删除这条数据吗",
                               text: "删除后将无法恢复，请谨慎操作！",
                               type: "warning",
                               showCancelButton: true,
                               confirmButtonColor: "#DD6B55",
                               confirmButtonText: "删除",
                               cancelButtonText: "取消",
                               closeOnConfirm: false
                           }, function () {
                               // todo
                               console.log("要删除的记录是："+row.id);
                               swal("删除成功！", "您已经永久删除了这条信息。", "success");
                           });

                       }
                   },
                   formatter: function (value, row, index) {
                       // 使用button时，需要指定事件
                       return [
                           "<button type='button' class='deleteBtn btn  btn-danger btn-xs glyphicon glyphicon-trash' style='margin-right: 15px;'></button>",
                           "<button type='button' class='downloadBtn btn btn-primary  btn-xs glyphicon glyphicon-download-alt'></button>"
                       ].join("");
                   },
               }]
           });
       });
    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件
        };
        return oInit;
    };


</script>

</body>
</html>